<template>
  <div id="dataPage">
    <h1>欢迎您，管理员&nbsp;{{ administratorMail }}</h1>
    <div id="chartBox" ref="chartBox">
      <div class="chartItem">
        <ArticleRelation :articleRelationData="articleRelationData" :resizeOrNot="resizeOrNot"></ArticleRelation>
      </div>
      <div class="chartItem">
        <EssayHeatmap :essayCountData="essayCountData" :resizeOrNot="resizeOrNot"></EssayHeatmap>
      </div>
      <div class="chartItem">
        <ArticleBar :articlePopularityList="articlePopularityList" :resizeOrNot="resizeOrNot"></ArticleBar>
      </div>
      <div class="chartItem">
        <ArticlePie :articleTypePieData="articleTypePieData" :resizeOrNot="resizeOrNot"></ArticlePie>
      </div>
    </div>
    <i class="el-icon-s-home" @click="toHome"> 返回前端主页</i>
  </div>
</template>

<script>
import ArticleRelation from '@/components/back/charts/ArticleRelation.vue'
import EssayHeatmap from '@/components/back/charts/EssayHeatmap.vue'
import ArticleBar from '@/components/back/charts/ArticleBar.vue'
import ArticlePie from '@/components/back/charts/ArticlePie.vue'
export default {
  data() {
    return {
      administratorMail: '未登录=.=', // 登录管理员邮箱
      articlePopularityList: {}, // 文章热度列表
      articleTypePieData: [], // 文章类型饼图数据
      articleRelationData: {}, // 文章关系数据
      essayCountData: [], // 文章数量统计数据
      resizeOrNot: false, // 是否需要重绘图表
    }
  },
  components: {
    ArticleRelation, EssayHeatmap, ArticleBar, ArticlePie
  },
  methods: {
    // 得到管理员数据
    getAdministratorData() {
      this.$axios({
        method: 'post',
        url: '/admin/login/getAdministrator/' + sessionStorage.getItem('token'),
      }).then(res => {
        this.administratorMail = res.data.mail
      })
    },
    // 返回前端首页
    toHome() {
      this.$router.push({
        path: '/'
      })
    },
    // 获取屏幕高度，图表自适应
    chartGetHeight() {
      let h = document.documentElement.clientHeight || document.body.clientHeight;
      this.$refs.chartBox.style.height = h - 180 + 'px';
    },
    // 获取文章人气前五列表
    getArticlePopularityList() {
      this.$axios({
        method: 'post',
        url: '/article/getFamousArticle',
      }).then(res => {
        this.articlePopularityList = res.data
      })
    },
    // 获取文章分类饼状图数据
    getArticleTypePieData() {
      this.$axios({
        method: 'post',
        url: '/article/getTypeArticleCount',
      }).then(res => {
        for (let i = 0; i < res.data.data.count.length; i++) {
          this.articleTypePieData.push({
            value: res.data.data.count[i],
            name: res.data.data.types[i].name
          })
        }
      })
    },
    // 获取该月随笔数量
    getEssayCount() {
      this.$axios({
        method: 'post',
        url: '/essay/getAmountEssayCount',
      }).then(res => {
        // 将后端的对象转化为数组，存入载体
        this.essayCountData = Object.keys(res.data).map((key) => { return [key, res.data[key]] })
      })
    },
    // 获取文章关系数据
    getArticleRelationData() {
      this.$axios({
        method: 'post',
        url: '/article/getArticleRelation',
      }).then(res => {
        res.data.data.chartData = [] // 文章图表数据载体
        res.data.data.chartLink = [] // 文章图表关系数据载体
        // 遍历数据得到图表数据
        for (let dataKey in res.data.data.TypeAndArticleData) {
          // 插入文章类型数据
          res.data.data.chartData.push({
            name: dataKey,
            symbolSize: 50, // 节点大小
            itemStyle: { // 节点样式
              color: '#f0b622', // 设置类别的颜色
            },
            category: dataKey, // 设置类目
          })
          // 遍历文章数据
          for (let article of res.data.data.TypeAndArticleData[dataKey]) {
            // 插入文章数据
            res.data.data.chartData.push({
              name: article.theme,
              symbolSize: 30, // 节点大小
              itemStyle: { // 节点样式
                color: '#9195F6', // 设置类别的颜色
              },
              category: dataKey, // 设置类目
              draggable: true, // 节点是否可拖拽
            })
            // 插入文章关系数据
            res.data.data.chartLink.push({
              target: article.theme,
              source: dataKey
            })
          }
        }
        delete res.data.data.TypeAndArticleData // 删除后端定义的属性
        this.articleRelationData = res.data.data
      })
    },
    // 窗口改变回调
    chartResize() {
      this.resizeOrNot = !this.resizeOrNot
    },
  },
  mounted() {
    this.chartGetHeight()
    // 得到管理员数据
    this.getAdministratorData()
    // 获取文章人气前五列表
    this.getArticlePopularityList()
    // 获取文章分类饼状图数据
    this.getArticleTypePieData()
    // 获取该月随笔数量
    this.getEssayCount()
    // 获取文章关系数据
    this.getArticleRelationData()
    // 绑定窗口大小改变事件
    window.addEventListener('resize', this.chartResize)
  },
}
</script>

<style lang="scss" scoped>
h1 {
  color: $color-main-text;
  font-size: $font-size-large;
  font-weight: $font-weight-large;
  margin: 50px auto;
  text-align: center;
}

i {
  font-size: $font-size-large;
  font-weight: $font-weight-large;
  cursor: pointer;
  display: block;
  text-align: center;
  margin: 50px auto;
}

i:hover {
  color: #fff;
}

#chartBox {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 80%;
  justify-content: space-evenly;
  align-items: center;
  overflow: hidden;
}

.chartItem {
  width: 45%;
  height: 45%;
  border-radius: 20px;
  border: 1px solid #ccc;
}
</style>